<template>
  <ContentWrap
    class="mb-0!"
    :class="[
      footer
        ? '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height)-10px)]'
        : '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-20px)]'
    ]"
    :bodyStyle="{ height: '100%', padding: '5px 0px' }"
  >
    <!-- 会员搜索 -->
    <el-scrollbar view-class="scrollbarClass">
      <div class="flex flex-col !h-full items-center justify-end">
        <Icon
          icon="svg-icon:shop_member_center"
          class="c-[var(--el-color-primary)]! h-140px! custom-text-240!"
        />
        <!-- 搜索工作栏 -->
        <el-row :gutter="10" class="mt-10px w-full">
          <el-col :span="24">
            <el-input
              v-model="queryParams.mobile"
              class="!w-full mb-10px !h-50px custom-text-24!"
              size="large"
              clearable
              placeholder="请输入会员ID/昵称姓名/手机"
            />
          </el-col>
          <el-col :span="24">
            <div class="h-220px mb-10px">
              <VirtualKeyboard v-model:model-value="queryParams.mobile" />
            </div>
          </el-col>
          <el-col :span="12">
            <el-button
              @click="reset"
              type="primary"
              size="large"
              class="w-full custom-text-18 h-50px!"
            >
              <Icon class="mr-5px custom-text-18" icon="ep:refresh" />
              重置
            </el-button>
          </el-col>
          <el-col :span="12">
            <el-button
              @click="openForm('create')"
              type="primary"
              size="large"
              class="w-full custom-text-18 h-50px!"
            >
              <Icon class="mr-5px custom-text-18" icon="ant-design:user-add-outlined" />
              新增
            </el-button>
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>
  </ContentWrap>
  <!-- 表单弹窗：添加/修改 -->
  <UserForm ref="formRef" />
</template>
<script lang="ts" setup>
defineOptions({ name: 'MemberSearch' })
import UserForm from '@/views/member/user/UserForm.vue'
import VirtualKeyboard from '@/views/shop/components/VirtualKeyboard/index.vue'
/** 门店会员信息 */
import { useShopUserStoreWithOut } from '@/store/modules/shop/user'
const shopUserStore = useShopUserStoreWithOut()
/** 门店会员列表查询 */
import { useShopMemberListStoreWithOut } from '@/store/modules/shop/memberList'
import { storeToRefs } from 'pinia'
const shopMemberListStore = useShopMemberListStoreWithOut()
const { queryParams } = storeToRefs(shopMemberListStore)
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const footer = computed(() => appStore.getFooter)
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNo = 1
  shopMemberListStore.search()
}

/** 重置按钮操作 */
const reset = () => {
  shopUserStore.resetState()
  shopMemberListStore.resetState()
}
/** 添加/修改操作 */
const emits = defineEmits(['buyMemberShip', 'setUserInfo'])

const openForm = (type: string) => {
  reset()
  emits('setUserInfo', type)
}
/** 输入发生变化时 */
watch(
  () => queryParams.value.mobile,
  () => {
    if (queryParams.value.mobile == '') {
      return
    }
    handleQuery()
  }
)

/** 初始化 **/

onMounted(() => {})
</script>
<style lang="scss" scoped>
.scrollbarClass {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
}
:deep(.el-input__inner::placeholder) {
  font-size: 16px;
}
</style>
